<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<div class="flexbetween flex_wrap">
			<div class="contentBox margin_bottom3" v-for="item in list.data" :key="item.id">
				<div class="flexbetween">
					<div class="text_ft color_three">{{item.card_type_text}}</div>
					<div class="text_ft color_theme">{{item.subject.name}}</div>
				</div>
				<div class="flexbetween margin_top2">
					<div class="text_d">
						<span class="color_nine">地区：</span>
						<span class="color_three">{{item.city_text}}</span>
					</div>
					<div class="text_d">
						<span class="color_nine">年级：</span>
						<span class="color_three">{{item.grade.name}}</span>
					</div>
				</div>
				<div class="flexbetween margin_top2">
					<div class="text_d">
						<span class="color_nine">开通：</span>
						<span class="color_three">{{item.createtime_text}}</span>
					</div>
					<div class="text_d">
						<span class="color_nine">到期：</span>
						<span class="color_three">{{item.expiretime_text}}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="flexcenter margin_top" v-if="list.total > 15">
			<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
				@current-change="tuijianchange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		viporder_list
	} from "@/API/studycard"
	export default {
		data() {
			return {
				page: 1,
				list: {
					data: []
				}
			}
		},
		created() {
			this.init()
		},
		methods: {
			init(page) {
				viporder_list({
					page: page || 1,
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox {
		width: 48%;
		padding: 20px;
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #EAEAEA;
	}
</style>